<script lang="ts" setup>
import { defineComponent, reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import { postLogin } from '@/api/login'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import Cookies from 'js-cookie'
const baseUrl = import.meta.env.VITE_APP_BASE_URL

const store = useStore()
const router = useRouter()
const loginForm = reactive<{ username: string, password: string }>({
  username: '',
  password: ""
})
async function login () {
  if (!loginForm.username || !loginForm.password) {
    ElMessage.error("请输入用户名和密码")
    return
  }
  let info = await postLogin({ username: loginForm.username, password: loginForm.password })
  if (info.code == '400') {
    ElMessage.error("用户名不存在或者密码错误")
    return
  }
  store.setLoginInform(info.data)
  Cookies.set("userToken", info.data.token, { expires: 3, path: '' })
  router.push("/map")
}
</script>
<template>
  <div class="login-x" :style="{ background: `url(${baseUrl}/imgs/envirenment.jpeg)` }">
    <div class="login-x-contain" sk-flex="col-around-around">
      <div class="login-contain-head" sk-flex="row-center">
        <div class="login-h-name" sk-flex="col-center-center">
          <span class="login-title">武汉市固废管理系统</span>
          <span class="login-subtitle">Wuhan Solid Waste Management System</span>
        </div>
      </div>
      <div class="login-contain-box" sk-flex="row-center">
        <div style="width: 36%" sk-flex="col-between">
          <div class="login-font">
            <span class="font-login" sk-flex="row-start-start">登录</span>
          </div>
          <div style="width: 100%; height: 12%;">
            <el-input placeholder="请输入用户名" v-model="loginForm.username" style="width: 100%;height: 100%">
              <template #prefix>
                <svg-icon icon-class="user" style="color: blue;margin-left: 6px;"></svg-icon>
              </template>
            </el-input>
          </div>
          <div style="width: 100%; height: 12%">
            <el-input placeholder="请输入密码" v-model="loginForm.password" show-password type="password"
              style="width: 100%;height: 100%;">
              <template #prefix>
                <svg-icon icon-class="password" style="color: blue;margin-left: 6px;"></svg-icon>
              </template>
            </el-input>
          </div>
          <div sk-flex="row-between"></div>
          <el-button type="primary" class="login-button" style="height: 12%;" @click="login">登录</el-button>
        </div>
      </div>
      <div class="login-contain-footer" sk-flex="row-center">
        <div class="login-footer-border"></div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.login-x {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-size: 100% 100% !important;
}

.login-x-contain {
  width: 49.5%;
  height: 61.4%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  //opacity: 0.1;
  //opacity: 0.15;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.login-contain-head {
  height: 27.8%;
}

.login-contain-footer {
  height: 10%;

  >.login-footer-border {
    width: 24.5rem;
    border-top: 2px solid #ffffff;
  }
}

.login-contain-box {
  flex: 1;

  .el-icon-s-custom:before {
    color: blue;
  }

  .el-icon-lock:before {
    color: blue;
  }

  .el-input {
    --el-input-background-color: rgba(255, 255, 255, 0.4);
  }

  :deep(.el-input__inner) {
    height: 100%;
  }

  .el-input__inner::placeholder {
    color: #000;
  }

  .el-checkbox {
    color: #f1f1f1;
    opacity: 0.6;
  }

  .password-remember .password-forget {
    width: 16.5%;
  }

  .password-forget {
    color: #fff;
    border-bottom: 1px solid #fff;
  }
}

.login-h-name {
  width: 24.5rem;
  border-bottom: 2px solid #ffffff;
  color: #3e3c3c;
  //background-color: #9AFF00;
}

.login-title {
  font-size: 40px;
  text-align: left;
  font-weight: bold;
}

.login-subtitle {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.login-font {
  font-size: 1rem;
  color: #333333;
  font-weight: bold;
  //border: 2px solid red;
  //margin-top: -2px;
  margin-bottom: 20px;

  .font-login {
    width: 2rem;
    border-top: 2px solid #343eff;
    margin-top: -2px;
  }
}

.login-button {
  margin-bottom: 60px;

  &.el-button {
    min-height: inherit;
  }
}
</style>
